<!DOCTYPE html> 
<html> 
	<head> 
	<title>OSS Festival</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="jquery/jquery.mobile-1.0.1.min.css" />
	<link rel="stylesheet" href="mobile.css" />
	<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
	<script src="jquery/jquery-1.7.1.min.js"></script>
	<script src="jquery/jquery.mobile-1.0.1.min.js"></script>
	<script src="jquery/jquery.ui.map.full.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$('#map').live("pageshow", function() {
		        $('#map_canvas').gmap('refresh');
		});
		$('#map').live("pagecreate", function() {
		        $('#map_canvas').gmap('addMarker', { /*id:'m_1',*/ 'position': '13.903024,100.532115', 'bounds': true } );
		});
	</script>
</head> 
<body> 

<!--  page home -->
<div data-role="page" id="home" >
	<div data-role="header">
		<h1>OSS Festival</h1>
	</div><!-- /header -->
	<div data-role="content">	
		<p>Content here!</p>
	</div><!-- /content -->
 	<div data-role="footer" data-position="fixed">
		<div data-role="navbar">
		   <ul>
			<li><a href="#home" data-icon="home" class="ui-btn-down-a">Home</a></li>
			<li><a href="#agenda" data-icon="info">Agenda</a></li>
			<li><a href="#map" data-icon="grid">Map</a></li>
			<li><a href="#tweet" data-icon="star">Tweet</a></li>
			<li><a href="#about" data-icon="gear">About</a></li>
		   </ul>
	   </div><!-- /navbar -->
	</div><!-- /footer -->
 </div><!-- /page -->

<!--  page agenda -->
<div data-role="page" id="agenda" >
	<div data-role="header">
		<h1>Agenda</h1>
	</div><!-- /header -->
	<div data-role="content">	
		<p>Content here!</p>
	</div><!-- /content -->
 	<div data-role="footer" data-position="fixed">
		<div data-role="navbar">
		   <ul>
			<li><a href="#home" data-icon="home">Home</a></li>
			<li><a href="#agenda" data-icon="info" class="ui-btn-down-a">Agenda</a></li>
			<li><a href="#map" data-icon="grid">Map</a></li>
			<li><a href="#tweet" data-icon="star">Tweet</a></li>
			<li><a href="#about" data-icon="gear">About</a></li>
		   </ul>
	   </div><!-- /navbar -->
	</div><!-- /footer -->
 </div><!-- /page -->

<!--  page map -->
<div data-role="page" id="map" style="width:100%; height:100%;">
	<div data-role="header">
		<h1>Map</h1>
	</div><!-- /header -->
	<div data-role="content">	
	 	<div id="map_canvas" style="width:100%;height:480px"></div>
		<p>Location : </p>
	</div><!-- /content -->
 	<div data-role="footer" data-position="fixed">
		<div data-role="navbar">
		   <ul>
			<li><a href="#home" data-icon="home">Home</a></li>
			<li><a href="#agenda" data-icon="info">Agenda</a></li>
			<li><a href="#map" data-icon="grid" class="ui-btn-down-a">Map</a></li>
			<li><a href="#tweet" data-icon="star">Tweet</a></li>
			<li><a href="#about" data-icon="gear">About</a></li>
		   </ul>
	   </div><!-- /navbar -->
	</div><!-- /footer -->
 </div><!-- /page -->

<!--  page tweet -->
<div data-role="page" id="tweet" >
	<div data-role="header">
		<h1>Tweet</h1>
	</div><!-- /header -->
	<div data-role="content" id="twitter"></div><!-- /content -->
<script type="text/javascript">
(function($) {
     $.toLink = function(text) {
        var urlRegExp = /((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*(\?\S+)?)?)?)/gm;
        var newText = text.replace(urlRegExp, '<a href="$1">$1</a>');
        return newText;
    };
})(jQuery);
$(function() {
//var twitterBaseURL = 'http://twitter.com/status/user_timeline/gabromanato.json?count=10&callback=?';
var twitterBaseURL = 'http://search.twitter.com/search.json?callback=?&q=ubuntuclub';
var html = '';
$('<ul />').appendTo('#twitter');
$.getJSON(twitterBaseURL, function(json) {
$.each(json.results, function(i, item) {
     var text = $.toLink(item.text);
     var profileImageURL = item.profile_image_url;
     html += '<li><img src="' + profileImageURL + '" />' + text + '</li>';
     if (i==9) return false;
   });
   $('ul', '#twitter').html(html);
});
});
</script>
 	<div data-role="footer" data-position="fixed">
		<div data-role="navbar">
		   <ul>
			<li><a href="#home" data-icon="home">Home</a></li>
			<li><a href="#agenda" data-icon="info">Agenda</a></li>
			<li><a href="#map" data-icon="grid">Map</a></li>
			<li><a href="#tweet" data-icon="star" class="ui-btn-down-a">Tweet</a></li>
			<li><a href="#about" data-icon="gear">About</a></li>
		   </ul>
	   </div><!-- /navbar -->
	</div><!-- /footer -->
 </div><!-- /page -->

<!--  page about -->
<div data-role="page" id="about" >
	<div data-role="header">
		<h1>About</h1>
	</div><!-- /header -->
	<div data-role="content">	
		Created by Anuchit Chalothorn &ltanuchit@redlinesoft.net&gt
	</div><!-- /content -->
 	<div data-role="footer" data-position="fixed">
		<div data-role="navbar">
		   <ul>
			<li><a href="#home" data-icon="home">Home</a></li>
			<li><a href="#agenda" data-icon="info">Agenda</a></li>
			<li><a href="#map" data-icon="grid">Map</a></li>
			<li><a href="#tweet" data-icon="star">Tweet</a></li>
			<li><a href="#about" data-icon="gear" class="ui-btn-down-a">About</a></li>
		   </ul>
	   </div><!-- /navbar -->
	</div><!-- /footer -->
 </div><!-- /page -->

</body>
</html>

